<template>
    <div>
<van-nav-bar
  title="购物车"
  left-text="返回"
  left-arrow
  @click-left="()=>{$router.back('/')}"
/>
<van-empty  v-if="!userdata.length"
  image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
  image-size="80"
  description="描述文字"
/>
<div v-else>
<van-swipe-cell v-for="key in userdata">
  <van-card
    :price="key.goods.goods_price"
    :title="key.goods.goods_name"
    class="goods-card"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  >
  <template #thumb>
    <van-checkbox v-model="key.checked">复选框</van-checkbox>
    <van-image
  width="100"
  height="100"
  :src="key.goods.goods_big_logo?key.goods.goods_big_logo:'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
/>
  </template>
  <template #num>
    <van-stepper v-model="key.number" theme="round" button-size="22" disable-input />

  </template>
</van-card>
  <template #right>
    <van-button square style="height: 100%;" text="删除" type="danger" class="delete-button" @click="delcart(key.id)"/>
  </template>
</van-swipe-cell>
</div>
<van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="allchecked">全选</van-checkbox>
  <template #tip>
    你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
  </template>
</van-submit-bar>

    </div>
</template>

<script setup>
import { ref,computed } from "vue";
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
console.log(store.carts);
let userdata=ref([])
const add=()=>{
    let username=localStorage.getItem('username')
    userdata.value=store.carts.filter(i=>i.username==username)
}
add()
const delcart=(id)=>{
    store.delcart(id)
    add()
}
const allprice=computed(()=>{
    let allprice=0
    let cart=userdata.value.filter(i=>i.checked)
    cart.forEach((i)=>{
        allprice+=i.number*i.goods.goods_price
    })
    return allprice*100
})
const allchecked=computed({
    get(){
        if(userdata.value.length==0){
            return false
        }
        else{
            return userdata.value.every(i=>i.checked)
        }
    },
    set(val){
        userdata.value.forEach(i=>i.checked=val)
    }
})
import { useRouter } from "vue-router";
const router=new useRouter()
import { createApi } from "@/api/api";
import { showToast } from 'vant';
const onSubmit=()=>{
     let cart=userdata.value.filter(i=>i.checked)
     if(cart.length==0){
         showToast({
                type:'fail',
                message:'请选择',
                duration:1500,
            });
     }
     else{
        console.log(cart);
        createApi({
          goodsIds:cart.map(i=>i.goods.goods_id).join(','),
           username:localStorage.getItem('username') ,
           product_code:cart[0].goods.goods_name+'等',
           totalPrice:allprice.value,
           nums:cart.map(i=>i.number).join(','),
        }).then(res=>{
            console.log('dd',res);
            router.push('/order/'+res.data.data.orderId)
        })
     }
}
</script>

<style lang="scss" scoped>

</style>